<template>

	<view class="content">
		
		
	
	<view style="width: 100%;height: 2upx;background-color: #eeeeee;"></view>
		
		
		
		
		
	
	<view class='cellBox' >
		<view class='iconleftHint'>已参与局数</view>
		
		<view class='iconleftHint' style="color: red;">{{this.mylist.length}}</view>

	</view>
		
		
	<view class='cellBox2' v-for="(item, index) in mylist" :key="index">
		
		<view class="myGroupState" style="color:1?'##007AFF':'#4cd964'">{{item.status == 2?"进行中":"已成团"}}</view>
		
		
		
		<view class="temeName">团队名称：{{item.teamname}}</view>
		
		
		<view class="teamboss">{{item.username}}</view>
		
		
		<view class="line1"></view>
		
		<view class="line2"></view>
		
		<view class="line3"></view>
		
		<view class="boxsecond">
			<view class="teamboss" style="margin-top: 0px;">{{item.onename?item.onename:'空'}}</view>
			
			<view class="teamboss" style="margin-top: 0px;">{{item.twoname?item.twoname:'空'}}</view>
			
			
		</view>
		
		<view class="line3"></view>
		
		<view class="boxsecond">
			<view class="line4"></view>
			<view class="line4"></view>
		</view>
		
		<view class="boxsecond">
			<view class="linebox">
				
			</view>
			
			<view class="linebox">
				
			</view>
			
			
		</view>
		
	<view style="width: 600upx;display: flex;flex-direction: row;">
		<view class="boxline2">
			<view class="bottomInfo">{{item.threename?item.threename:'空'}}</view>
			<view class="bottomInfo">{{item.fourname?item.fourname:'空'}}</view>
			
			
		</view>
		
		<view  class="boxline2">
			<view class="bottomInfo">{{item.fivename?item.fivename:'空'}}</view>
			<view class="bottomInfo">{{item.sixname?item.sixname:'空'}}</view>
			
			
		</view>
	</view>
	
		

	</view>
		


		






	


	</view>
</template>


<script>
	const delay = (function() {
		let timer = 0
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms)
		}
	})()

	import {
		isMemberWeb
	} from '@/config/config.js'
	import jihaiCopyright from '@/components/jihai-copyright/jihaiCopyright.vue'
	import {
		checkLogin
	} from '@/config/mixins.js'
	export default {
		components: {
			jihaiCopyright
		},

		mixins: [checkLogin],
		data() {
			return {
				mylist: '',

			}
		},
		onShow() {


			if (!this.$db.get('userToken') && isMemberWeb) {



				this.checkIsLogin()
		
				return



			}


			this.initData()
		},
		methods: {

	



			goLogin() {
				uni.navigateTo({
					url: '/pages/login/choose/index'
				})
			},


			initData() {
				// 获取用户信息
				
				// recomment
				
				// userInfo
				
				let userToken = this.$db.get("userToken");
				
				var data = {
					limit:1000,
					token : userToken,
					page : 1
				}
			
			console.log(data);
		
			this.$api.teamlist( data, res => {
				if (res.status) {
			
	
					
					this.mylist = res.data;
					
					console.log(this.mylist);
					
			
			
				}
			})
		
		
		
			},



		},
		computed: {

		},
		watch: {}
	}
</script>

<style lang="scss" scoped>
	
	// page{
	// 	background-color: #FFFFFF;
	// }
	
	
	.cellBox {

		width: 100%;
		
		display: flex;

		flex-direction: row;
		
		justify-content: space-between;
		

	
		height: 90upx;
	

		margin-top: 15upx;
		background: white;
	
	
	}



	.iconleftHint {

		height: 90upx;

		line-height: 90upx;


		margin-left: 40upx;
		
		margin-right: 40upx;
		
		font-size: 28upx;
		
		font-weight: blod;

		color: #333333;



		// background-color: #007AFF;


	}
	
	.cellBox2{
		
		
		
		width: 100%;
		
		display: flex;
		
		flex-direction: column;
		
		// justify-content: space-between;
		
		align-items: center;
		
		
			
		height: 440upx;
			
		
		margin-top: 15upx;
		background: white;
		
		position: relative;
		
		overflow: hidden;
		
		
	}

	.temeName{
		
		position: absolute;
		
		font-size: 28upx;
		
		font-weight: blod;
		
		color: #333333;
		
		text-align: center;
		
		left: 40upx;
		top: 28upx;
		// background: #4cd964;
		// color: #fff;
		// font-size: 28upx;
		// line-height: 40upx;

		
	}

	
	.myGroupState {
		
	
		position: absolute;
		

		transform: rotate(45deg);
		
		width: 200upx;
		
		text-align: center;
		
		right: -60upx;
		top: 28upx;
		background: #4cd964;
		color: #fff;
		font-size: 28upx;
		line-height: 40upx;
		padding: 0 0.625rem;
	
	}
	
	
	.teamboss{
		
		background: red;
		
		width: 150upx;
		
		text-align: center;

		margin-top: 120upx;
		
		height: 40upx;
		
		line-height: 40upx;
		
		color: white;
		
		border-radius: 8upx;
		
		
		
		
	}
	
	.line1{
		
		width: 2upx;
		
		height: 40upx;
		
		background: #000000;
		
	}
	
	.line2{
		
		width: 300upx;
		
		height: 2upx;
		
		background: #000000;
		
	}
	
	
	.line3{
		
		width: 300upx;
		
		height: 40upx;
		
		// background: #000000;
		
		border-left-color: #000000;
		
		border-left-style: solid;
		
		border-left-width: 2upx;
		
		border-right-color: #000000;
		
		border-right-style: solid;
		
		border-right-width: 2upx;
		
	}
	
	.boxsecond{
		
		width: 450upx;
		
		display: flex;
		
		justify-content: space-between;
		
		flex-direction: row;
		
		// background-color: #007AFF;
		
		// height: ;
		
		
	}
	
	.line4{
		width: 150upx;
		height: 2upx;
		background-color: #000000;
		
		
	}
	
	.linebox{
		
		width: 150upx;
		height: 40upx;
		// background-color: #000000;
		
		
		border-left-color: #000000;
		
		border-left-style: solid;
		
		border-left-width: 2upx;
		
		border-right-color: #000000;
		
		border-right-style: solid;
		
		border-right-width: 2upx;
		
	}
	
	.boxline2{
		
		height: 40upx;
		width: 300upx;
		
		display: flex;
			
		flex-direction: row;
		
		justify-content: space-between;
		
	}
	
	
	.bottomInfo{
		
		background: red;
		
		width: 110upx;
		
		text-align: center;
		
		margin-left: 20upx;
		
		margin-right: 20upx;
		
		// margin-top: 40upx;
		
		height: 40upx;
		
		line-height: 40upx;
		
		color: white;
		
		border-radius: 8upx;
		
		font-size: 20upx;
		
		
	}
	
	
	
	
</style>
